<template>
    <div class="tarb">
        <van-tabbar 
            v-model="active" 
            active-color="#ff6c4e" 
            inactive-color="#988f93" 
            @change="fn"
            route
        >
            <van-tabbar-item icon="good-job-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact-o" to="/mine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    name: 'TabBar',
    props: {
        active1: {
            default: 0,
            type: Number
        }
    },
    data() {
        return {
            active: 0
        }
    },
    created() {
        this.active = this.$props.active1;
        // 初始化时根据当前路由设置激活项
        const path = this.$route.path;
        switch(path) {
            case '/home': this.active = 0; break;
            case '/search': this.active = 1; break;
            case '/cart': this.active = 2; break;
            case '/mine': this.active = 3; break;
        }
    },
    methods: {
        fn(index) {
            const routes = {
                0: '/home',
                1: '/search',
                2: '/cart',
                3: '/mine'
            };
            
            const path = routes[index];
            if (path) {
                this.$router.push(path);
            }
        }
    }
}
</script>

<style lang="less">
.tarb {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
}
</style> 